<template>
	<view>
		<view class="container">
			
			<uni-nav-bar title="商品详情" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
			
			<swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" circular="true" duration="1000" v-if="galleries.length > 0">
				<swiper-item v-for="(item, index) in galleries" :key="index">
					<image :src="item" background-size="cover" lazy-load></image>
				</swiper-item>
			</swiper>
			<view class="goods-info">
				<view class="l">
					<text class="name">{{goods.name}}</text>
				</view>
				<view class="r">
					<view class="item" @tap="openInfo" v-if="goods.detailMobileHtml" hover-class="none">
						<image class="icon" src="/static/static/images/info.png"></image>
						<text class="txt">资料</text>
					</view>
					<navigator class="item"  @tap="addCannelCollect"  hover-class="none">
						<block v-if="collect == undefined">
							<image class="icon"  src="/static/static/images/icon_collect.png"></image>
						</block>
						<block v-if="collect != undefined">
							<image class="icon"  src="/static/static/images/icon_collect_checked.png"></image>
						</block>
						<text class="txt">收藏</text>
					</navigator>
					<navigator class="item" @tap="showSharedFun" hover-class="none">
						<image class="icon"  src="/static/static/images/share.png"></image>
						<text class="txt">分享</text>
					</navigator>
				</view>
			</view>
			<view v-show="(commentlist.length > 0)">
				 <view class="detailmenu" id="detailmenu"  :class="(isTop == 1?'detailtop':'')"> 
					<view class="detailitem" v-for="(item,index) in statusType" :key="index" @tap="tapchange" :data-status="item.status">
						<view :class="'detailtext'+ (item.status == status ? 'active' : '')">{{item.label}}</view>
						<view class="line" v-show="(item.status == status)"></view>
					</view>
				</view>
				<view class="detail" v-show="(status==0)">
					<jyf-parser :html="article_goodsDetail"></jyf-parser>
				</view>
				<view class="detail" v-show="(status==1)" style="background:#F1F1F1;padding:0;">
					<view class="detail-item"  style=" padding:0rpx 30rpx 0 30rpx;" v-show="(commentlist.length == 1)">
						<rich-text :nodes="commentcontent|formatRichText"></rich-text>
					</view>
					<!-- <navigator class="detail-item" v-for="(item,index) in commentlist" :key="index" v-show="(commentlist.length > 1)" :url="'pages/goodsconment/goodsconment'+item.id">
						<view class="item-title">{{item.title}}</view>
						<view class="item-desc">{{item.description}}</view>
						<image class="item-pic" :src="item.pic" />
					</navigator> -->
					<view class="detail-item" v-for="(item,index) in commentlist" :key="index" v-show="(commentlist.length > 1)" @tap="tocontent" :data-id="item.id">
						<view class="item-title">{{item.title}}</view>
						<view class="item-desc">{{item.description}}</view>
						<image class="item-pic" :src="item.pic" />
					</view>
				</view>
			</view>
			<view class="detail" v-show="(commentlist.length==0)">
				<jyf-parser :html="article_goodsDetail"></jyf-parser>
			</view>
		</view>
		
		<view class="share-bar-wrap" v-if="showShared">
			<view class="share-bar" v-if="showShared">
				<view class="bars">
					<button class="item" open-type="share">
						<image class="icon" src="/static/static/images/shareother.png"></image>
						<text class="txt">分享给朋友</text>
					</button>
					<button class="item" @tap="shareBussiness">
						<image class="icon" src="/static/static/images/goodcircle.png"></image>
						<text class="txt">推荐好物圈</text>
					</button>
					<button class="item" @tap.stop="downloudpic">
						<image class="icon" src="/static/static/images/loadimg.png"></image>
						<text class="txt">保存图片</text>
					</button>
				</view>
				<view class="bottom" @tap="showSharedFun">
					<text>取消</text>
				</view>
			</view>
		</view>
		

		<view class="attr-pop-box" v-if="openAttr || choice">
			<view class="attr-pop">
				<view class="close" @tap="closeAttr">
					<image class="icon" src="/static/static/images/icon_close.png"></image>
				</view>
				<view class="img-info">
					<image class="img" :src="galleries[0]"></image>
					<view class="info">
						<view class="c">
							<view class="n">{{goods.name}}</view>
							<view class="p">
								<view class="p p1">￥</view>
								<view class="p p2">{{price}}</view>
							</view>
							<view class="a" v-if="productList.length>0">已选择：{{checkedSpecText}}</view>
						</view>
					</view>
				</view>
				<view class="spec-con">
					<view class="divLine"></view>
					<view class="spec-item" v-if="skuStockList.length > 0">
						<view class="name">商品规格</view>
						<view class="values">
							<view v-for="(item, index) in skuStockList" :key="index" :class="'value ' + (item.checked ? 'selected' : '')"
							 @tap="clickSkuValue" :data-value-id="item.id" :data-name-id="item.id" :data-sku-index="index">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="divLine"></view>
					<view class="number-item" v-if="!skuStockList[skuindex] || skuStockList[skuindex].stock > skuStockList[skuindex].lowStock">
						<view class="name">购买数量</view>
						<view class="selnum">
							<view :class="'cut ' + (number > 1 ? '' : 'noChange')" @tap="cutNumber">-</view>
							<input :value="number" class="number" disabled="true" type="number"></input>
							<view class="add" @tap="addNumber">+</view>
						</view>
					</view>
					<view class="number-item"  v-if="skuStockList[skuindex].stock <= skuStockList[skuindex].lowStock">
						<view class="name" style="background-color:#eaeaea; text-align:center;">库存紧张</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn2" v-if="choice">
			<view class="con" @tap.stop="confirAttr">确定</view>
		</view>
		<!-- 不加入库存不足 -->
		<!-- <view class="bottom-btn2" v-else-if="openAttr " >
			<view class="to" @tap.stop="addToCart">加入购物车</view>
			<view class="now" @tap.stop="addToOrder">立即购买</view>
		</view> -->
		<!-- 加入商品库存不足 -->
		<view class="bottom-btn2" v-else-if="openAttr && !skuStockList[skuindex]" >
			<view class="to" @tap.stop="addToCart">加入购物车</view>
			<view class="now" @tap.stop="addToOrder">立即购买</view>
		</view>
		<view class="bottom-btn2" v-else-if="openAttr && skuStockList[skuindex].stock > skuStockList[skuindex].lowStock" >
			<view class="to" @tap.stop="addToCart">加入购物车</view>
			<view class="now" @tap.stop="addToOrder">立即购买</view>
		</view>
		<view class="bottom-btn2" v-else-if="openAttr && skuStockList[skuindex].stock <= skuStockList[skuindex].lowStock">
			<view class="con" style="background-color: #eaeaea; color:#333333">商品库存不足</view>
		</view>
		<view class="bottom-btn" v-else-if="!openAttr">
			<view class="l" v-if="goods.publishStatus==1" hover-class="none">
				<navigator @tap="toHome" url="/pages/index/index">
					<image @tap="openCartPage" class="icon" src="/static/static/images/icon_index.png"></image>
					<text class="txt">首页</text>
				</navigator>
			</view>
			<view class="l" v-if="goods.publishStatus==1" hover-class="none">
				<button class="kefu" open-type="contact" @contact="handleContact">
					<image @tap="openCartPage" class="icon" src="/static/static/images/detail_kefu.png"></image>
					<text class="txt">客服</text>
				</button>
			</view>
			<view class="l action" v-if="goods.publishStatus==1" @tap="openCartPage" hover-class="none">
				<navigator url="/pages/cart/cart">
					<view class="box">
						<!-- <text class="cart-count">{{cartItem.length}}</text> -->
						<image class="icon" src="/static/static/images/ic_menu_shoping_nor.png"></image>
					</view>
					<text class="txt">购物车</text>
				</navigator>
			</view>
			<!-- 商品下架 -->
			<view class="c" v-if="goods.publishStatus==1" @tap.stop="addToCart">加入购物车</view>
			<view class="r"  v-if="goods.publishStatus==1" @tap.stop="addToOrder">立即购买</view>
			<view class="o"  v-if="goods.publishStatus==0">商品已经下架了</view>
			<!-- 无商品下架 -->
			<!-- <view class="c"  @tap.stop="addToCart">加入购物车</view>
			<view class="r"  @tap.stop="addToOrder">立即购买</view> -->
		</view>

		<view :class="'canvaswrap ' + (showcanvas?'showcanvas':'hidecavas')">
			<canvas canvas-id="mycanvas" style="position:fixed; top:130rpx; left:110rpx; width:530rpx; height:816rpx; border-radius:16rpx;"></canvas>
			<cover-image class="canceldownload" style="position:fixed; top:160rpx; right:140rpx; width:40rpx; height:40rpx;"
			 @tap.stop="canceldownload" src="/static/static/images/icon_close.png"></cover-image>
			<view class="savepic" @tap.stop="saveImageToAlbum">保存图片</view>
		</view>
		<login :show="showLoginDialog" @success="onLigonSuccess"></login>
	</view>
</template>

<script>
	var app = getApp();

	var util = require("../../utils/util.js");
	var api = require("../../config/api.js");
	// var QRCode = require("../../utils/weapp-qrcode.js");
	const device = uni.getSystemInfoSync();
	const xs = device.windowWidth / 750;
	// import canvasdrawer from "../../lib/canvasdrawer/canvasdrawer";
	import login from "../component/login/login";
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

	export default {
	
		data() {
			return {
				statusType: [{
					status: 0,
					label: '商品详情'
				}, {
					status: 1,
					label: '商品测评'
				}],
				status: 0,
				commentlist: '', //琅琊测评记录
				commentcontent: '', //琅琊测评内容
				id: 0,
				goods: {},
				attribute: [],
				attributeValue: [],
				comment: [],
				brand: {},
				skuStockList: [],
				relatedGoods: [],
				cartItem: {},
				collect: {},
				number: 1,
				checkedSpecText: '请选择规格数量',
				openAttr: false,
				choice: false,
				showShared: false,
				showLoginDialog: false,
				chooseSku: {},
				price: 0,
				showcanvas: false,
				canvasgoodname: '',
				postUrl: '',
				painting: {},
				width: 530 * xs,
				height: 816 * xs,
				top: 130 * xs,
				left: 110 * xs,
				buynow: false,
				galleries: [],
				anvasusername: "",
				article_goodsDetail: "",
				productList: [],
				detailtop: '',
				isTop: 0,
				skuindex: 100
			};
		},
		components: {
			login,
			uniNavBar
		},
		onLoad: function(options) {
			// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
			var scene = decodeURIComponent(options.scene);
			console.log(options.choiceattr)
			if(options.id){
				this.id = options.id;
				console.log(this.id)
			}
			if (options.choiceattr){
				this.choice = options.choiceattr;
				console.log(this.choice)
			}
			// console.log("==scene==options==" + scene); // 页面初始化 options为页面跳转所带来的参数
			if (scene !== 'undefined') {
				wx.navigateTo({
					url: '/pages/goods/goods?id=' + parseInt(scene)
				})
			} else {
				this.id = parseInt(options.id)
			}	
		},
		onShow: function() {
			let that = this;
			that.getGoodsInfo();
			that.getcomment();
			that.getCartGoodsCount();
			that.buynow = false;
			that.showLoginDialog = false;
		},
		onUnload() {},
		onHide(){},
		onShareAppMessage: function(res) {
			return {
				title: this.goods.name,
				path: '/pages/goods/goods?id=' + this.id
			};
		},
		onPageScroll(e) {
			if(this.detailtop == ''){
				// console.log("get top");
				// this.getTop();
			}else{
				if (this.detailtop <= e.scrollTop) {
					this.isTop = 1;
				} else {
					this.isTop = 0;
				}
			}	
		},
		methods: {
			goback:function(){
					uni.navigateBack();
			},
			tocontent(e){
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/goodsconment/goodsconment?id='+id,
					
					success() {
						console.log('success')
					},
					fail(res) {
						console.log(res)
					}
				})
			},
			getTop: function(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.detailmenu').boundingClientRect(data => {
					console.log('wwww节点离页面顶部的距离为' + JSON.stringify(data.top));
					this.detailtop = data.top-146*xs;
					// this.detailtopDefault = data.top;
				}).exec();
			},
			tapchange: function(e) {
				const status = e.currentTarget.dataset.status;
				this.status = status;
			},
			getcomment: function() {
				uni.request({
					url: api.SubjectList,
					method: 'GET',
					data: {
						productId: this.id
					},
					success: res => {
						this.commentlist = res.data.result.records;
						if( res.data.result.records.length>0){
							this.commentcontent = res.data.result.records[0].content;
							// console.log(res.data.result.records[0].content)
						}						
					},
					fail: (res) => {
						//console.log(JSON.stringify(res))
					}
				});
			},
			getGoodsInfo: function() {
				let that = this;
				util.request(api.GoodsDetail, {
					id: that.id
				}).then(function(res) {
					if (res.errno == 0) {
						that.setData({
							goods: res.data.product,
							attribute: res.data.productAttributeList,
							attributeValue: res.data.productAttributeValueList,
							// comment: res.data.commentList,
							// brand: res.data.brand,
							skuStockList: res.data.skuStockList,
							collect: res.data.collect,
							canvasgoodname: res.data.product.name,
							showLoginDialog: false
						});
						if (that.goods.albumPics == undefined || that.goods.albumPics == null || that.goods.albumPics == '') {
							that.setData({
								galleries: [that.goods.pic]
							});
						} else {
							that.setData({
								galleries: that.goods.albumPics.split(",")
							});
						}

						let skuStockList = that.skuStockList;
						skuStockList.forEach(element => {
							let spData = JSON.parse(element.spData);
							let name = '';
							spData.forEach(sku => {
								name += sku.value;
							});
							element.name = name + ' ';
						});
						that.setData({
							skuStockList: skuStockList
						});
						setTimeout(() => {
							that.article_goodsDetail = res.data.product.detailHtml;
						}, 200);
						that.isCollected(that.goods.id); // console.log(JSON.stringify(that.data.goods))
					}
				});
				setTimeout(function(){
					that.getTop();
				},1000);
			},
			
			clickSkuValue: function(event) {
				let specNameId = event.currentTarget.dataset.nameId; //判断是否可以点击
				//TODO 性能优化，可在wx:for中添加index，可以直接获取点击的属性名和属性值，不用循环
				let _skuStockList = this.skuStockList; // console.log("==_skuStockList=="+JSON.stringify(_skuStockList));
				this.skuindex = event.currentTarget.dataset.skuIndex;
				var chooseSku;
				_skuStockList.forEach(sku => {
					if (sku.id == specNameId) {
						sku.checked = true;
						chooseSku = sku;
					} else {
						sku.checked = false;
					}
				});

				this.setData({
					skuStockList: _skuStockList,
					chooseSku: chooseSku
				}); //重新计算sku改变后的信息

				this.resetPrice();
				this.changeSpecInfo();
			},
			resetPrice: function() {
				if (this.chooseSku) {
					this.setData({
						price: this.chooseSku.price * this.number
					});
				}
			},
			//获取选中的规格信息
			getCheckedSpecValue: function() {
				let checkedValues = [];
				let _skuStockList = this.skuStockList;

				_skuStockList.forEach(sku => {
					if (sku.checked) {
						let _checkedObj = {
							nameId: sku.id,
							valueId: sku.checked ? sku.id : 0,
							valueText: sku.name
						};
						checkedValues.push(_checkedObj);
					}
				});

				return checkedValues;
			},
			changeSpecInfo: function() {
				let checkedNameValue = this.getCheckedSpecValue();
				let checkedValue = checkedNameValue.filter(function(v) {
					if (v.valueId != 0) {
						return true;
					} else {
						return false;
					}
				}).map(function(v) {
					return v.valueText;
				});

				if (checkedValue.length > 0) {
					this.setData({
						'checkedSpecText': checkedValue.join('　')
					});
				} else {
					this.setData({
						'checkedSpecText': '请选择规格数量'
					});
				}
			},
			getCheckedProductItem: function() {
				let sku = null;

				if (this.skuStockList.length > 0) {
					this.skuStockList.forEach(element => {
						if (element.checked) {
							// console.log("==getCheckedProductItem=="+JSON.stringify(element));
							sku = element;
						}
					});
				}

				return sku;
			},
			getCartGoodsCount: function(productId) {
				var that = this;
				util.request(api.CartGoodsCount).then(function(res) {
					if (res.errno == 0) {
						that.setData({
							// cartGoodsCount: res.data.cartTotal.goodsCount
							cartItem: res.data
						});
					}
				});
			},
			isCollected: function(productId) {
				var that = this;

				if (util.isLogin()) {
					util.request(api.IsCollected, {
						productId: productId
					}).then(function(res) {
						if (res.errno == 0) {
							that.setData({
								// cartGoodsCount: res.data.cartTotal.goodsCount
								cartItem: res.data
							});
						}
					});
				}
			},
			showLogin: function() {
				this.setData({
					showLoginDialog: true
				});
			},
			switchAttrPop: function() {
				if (this.openAttr == false) {
					this.setData({
						openAttr: !this.openAttr
					});
				}
			},
			closeAttr: function() {
				this.setData({
					openAttr: false,
					choice: false
				});
			},
			addCannelCollect: function() {
				if (!this.checkLogin()) {
					return;
				}

				let that = this; //添加或是取消收藏

				util.request(api.CollectAddOrDelete, {
					id: that.id
				}, "GET").then(function(res) {
					//console.log(JSON.stringify(res));

					if (res.errno == 0) {
						that.setData({
							collect: res.data.collect
						});
					} else {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: res.errmsg,
							mask: true
						});
					}
				});
			},
			checkLogin: function() {
				//console.log("==checkLogin==")
				if (!util.isLogin()) {
					this.showLogin();
					return false;
				}

				return true;
			},
			openCartPage: function() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			confirAttr: function(){
				if (this.skuStockList.length > 0 && this.getCheckedSpecValue().length == 0) {
					uni.showToast({
						image: "/static/static/images/icon_error.png",
						title: '请选择规格',
						mask: true
					});
					return false;
				} //根据选中的规格，判断是否有对应的sku信息
				
				
				let checkedProduct = this.getCheckedProductItem();
				
				if (!checkedProduct || checkedProduct.length <= 0) {
					//找不到对应的product信息，提示没有库存
					uni.showToast({
						image: "/static/static/images/icon_error.png",
						title: '库存不足',
						mask: true
					});
					return false;
				} 
				//验证库存
				if (checkedProduct.stock < this.number) {
					//找不到对应的product信息，提示没有库存
					uni.showToast({
						image: "/static/static/images/icon_error.png",
						title: '库存不足',
						mask: true
					});
					return false;
				} 
				//返回购物车
				util.request(api.CartAdd, {
					productId: this.goods.id,
					quantity: this.number,
					productSkuId: checkedProduct.id
				}, "POST").then(function(res) {
					let _res = res;
				
					if (_res.errno == 0) {
						uni.showToast({
							title: '添加成功'
						});
						uni.navigateBack({
						  delta: 1,
						  // success: function (res) {
						  //   eventChannel.emit('onChoice')
						  // }
						  });
					} else {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: _res.errmsg,
							mask: true
						});
					}
				});
				
			},
			addToCart: function() {
				if (!this.checkLogin()) {
					return;
				}

				var that = this;

				if (this.openAttr == false) {
					//打开规格选择窗口
					this.setData({
						openAttr: !this.openAttr
					});
				} else {
					//提示选择完整规格
					// console.log("==this.data.skuStockList.length=="+(this.data.skuStockList.length>0));
					if (this.skuStockList.length > 0 && this.getCheckedSpecValue().length == 0) {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '请选择规格',
							mask: true
						});
						return false;
					} //根据选中的规格，判断是否有对应的sku信息


					let checkedProduct = this.getCheckedProductItem();

					if (!checkedProduct || checkedProduct.length <= 0) {
						//找不到对应的product信息，提示没有库存
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '库存不足',
							mask: true
						});
						return false;
					} //验证库存


					if (checkedProduct.stock < this.number) {
						//找不到对应的product信息，提示没有库存
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '库存不足',
							mask: true
						});
						return false;
					} //添加到购物车


					util.request(api.CartAdd, {
						productId: this.goods.id,
						quantity: this.number,
						productSkuId: checkedProduct.id
					}, "POST").then(function(res) {
						let _res = res;

						if (_res.errno == 0) {
							uni.showToast({
								title: '添加成功'
							});
							that.setData({
								openAttr: !that.openAttr
							});
						} else {
							uni.showToast({
								image: "/static/static/images/icon_error.png",
								title: _res.errmsg,
								mask: true
							});
						}
					});
				}
			},

			//立即购买
			addToOrder: function() {
				if (!this.checkLogin()) {
					return;
				}

				if (!this.checkInfo()) {
					return;
				} //根据选中的规格，判断是否有对应的sku信息


				let checkedProduct = this.getCheckedProductItem(); //添加到购物车

				util.request(api.CartAdd, {
					productId: this.goods.id,
					quantity: this.number,
					productSkuId: checkedProduct.id
				}, "POST").then(function(res) {
					let _res = res;

					if (_res.errno == 0) {
						uni.navigateTo({
							url: '../shopping/checkout/checkout?id=' + _res.data.id
						});
					} else {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '重新选择',
							mask: true
						});
					}
				});
			},
			checkInfo: function() {
				if (this.openAttr == false) {
					//打开规格选择窗口
					this.setData({
						openAttr: !this.openAttr
					});
				} else {
					//提示选择完整规格
					if (this.skuStockList.length > 0 && this.getCheckedSpecValue().length == 0) {
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '请选择规格',
							mask: true
						});
						return false;
					} //根据选中的规格，判断是否有对应的sku信息


					let checkedProduct = this.getCheckedProductItem();

					if (!checkedProduct || checkedProduct.length <= 0) {
						//找不到对应的product信息，提示没有库存
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '库存不足',
							mask: true
						});
						return false;
					} //验证库存


					if (checkedProduct.stock < this.number) {
						//找不到对应的product信息，提示没有库存
						uni.showToast({
							image: "/static/static/images/icon_error.png",
							title: '库存不足',
							mask: true
						});
						return false;
					}

					return true;
				}

				return false;
			},
			cutNumber: function() {
				this.setData({
					number: this.number - 1 > 1 ? this.number - 1 : 1
				});
				this.resetPrice();
			},
			addNumber: function() {
				this.setData({
					number: this.number + 1
				});
				this.resetPrice();
			},
			toHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			showSharedFun: function() {
				// wx.showToast({
				//   icon: 'none',
				//   title: "研发中，敬请期待",
				// });
				this.setData({
					showShared: !this.showShared
				});
			},

			shareBussiness: function() {
				if (uni.navigateToMiniProgram) {
					uni.navigateToMiniProgram({
						appId: 'wxb036cafe2994d7d0',
						path: '/publish/ugc-publish/ugc-publish',
						extraData: {
							productInfo: {
								title: this.goods.name,
								path: '/pages/goods/goods?id=' + this.id,
								thumbUrl: this.galleries[0]
							}
						}
					});
				}
			},
			openInfo: function() {
				//console.log(JSON.stringify(this.goods.detailMobileHtml));
				uni.navigateTo({
					// url: '/pages/goodsDetail/goodsDetail?data'+JSON.stringify(this.data.goods),
					url: '/pages/goodsDetail/goodsDetail?id=' + this.id
				});
			},

			handleContact(e) {
				//console.log(JSON.stringify(e));
				//console.log(e.detail.query);
			},

			downloudpic: function() {
				let that = this;

				//保存二维码
				// util.request(api.WxWxcode, {
				// 	scene: that.goods.id,
				// 	page: 'pages/goods/goods'
				// }, 'POST').then(function(res) {
				// 	const fsm = uni.getFileSystemManager();
				// 	const FILE_BASE_NAME = 'tmp_base64src';
				// 	const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(res.message) || [];

				// 	if (!format) {
				// 		return;
				// 	}

				// 	const filePath = `${uni.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
				// 	console.log("==filePath==" + filePath);
				// 	const buffer = uni.base64ToArrayBuffer(bodyData);
				// 	console.log("==buffer==" + buffer);
				// 	fsm.writeFile({
				// 		filePath,
				// 		data: buffer,
				// 		encoding: 'binary',

				// 		success() {
				// 			that.setData({
				// 				canvasercode: filePath
				// 			});
				// 			console.log(that.canvasercode);
				// 		}

				// 	});
				// });
				that.setData({
					showcanvas: true,
					showShared: false
				}); //获取商品图片

				var userinfor = wx.getStorageSync('userInfo')
				if (!userinfor) {
					that.showLogin();
					that.canceldownload()
				} else {

					wx.showLoading({
						title: '图片正在生成中...'
					}) //  
					//获取商品图片
					let promise1 = new Promise(function(resolve, reject) {
						let goodurl = that.goods.pic;

						wx.downloadFile({
							url: goodurl,
							success: function(res) {
								wx.getImageInfo({
									src: res.tempFilePath,
									success: function(res) {
										// console.log('promise1'+JSON.stringify(res));  
										resolve(res)
									}
								})
							}
						})

					});


					//获取用户头像
					let promise2 = new Promise(function(resolve, reject) {
						//获得微信昵称，下载微信头像
						let avatarurl = userinfor.avatar;
						//  console.log("ggg"+avatarurl);
						wx.downloadFile({
							url: avatarurl,
							success: function(res) {
								wx.getImageInfo({
									src: res.tempFilePath,
									success: function(res) {
										resolve(res)
										// console.log('promise2'+JSON.stringify(res));
									}
								})
							},
							fail: function() {
								console.log('fail 用户头像')
							}
						});
					});


					//获取二维码
					let promise3 = new Promise(function(resolve, reject) {
						util.request(api.WxWxcode, {
							scene: that.goods.id,
							page: 'pages/goods/goods'
						}, 'POST').then(function(res) {
							const fsm = wx.getFileSystemManager();
							const FILE_BASE_NAME = 'tmp_base64src';
							const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(res.message) || [];
							if (!format) {
								return;
							}
							const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;

							const buffer = wx.base64ToArrayBuffer(bodyData);

							fsm.writeFile({
								filePath,
								data: buffer,
								encoding: 'binary',
								success() {
									wx.getImageInfo({
										src: filePath,
										success: function(res) {
											resolve(res)
											//console.log('promise3'+JSON.stringify(res));
										}
									})
								}
							})
						});


						//二维码生成，并保存到临时路径
						// new QRCode('canvastemp', {
						//   text: "https://www.baidu.com",
						//   width: 150*xs,
						//   height: 150*xs,
						//   colorDark: "#000000",
						//   colorLight: "#ffffff",
						//   correctLevel: QRCode.CorrectLevel.H,
						//   callback: (res) => {
						//     console.log(res)
						//     wx.getImageInfo({
						//       src: res.path,
						//       success: function(r){
						//         resolve(r)
						//       }
						//     })
						//   }
						// });
					});


					let promise4 = new Promise(function(resolve, reject) {

						resolve();
					});

					Promise.all([
						promise1, promise2, promise3, promise4
					]).then(res => {

						console.log(JSON.stringify(res))
						var ctx = wx.createCanvasContext('mycanvas');
						var cancel = wx.createCanvasContext('cancel');
						//绘制背景框
						//console.log(xs);
						that.roundRect(ctx, 0, 0, 530 * xs, 816 * xs, 16 * xs, '#f1f1f1');
						//画头像
						ctx.save()
						ctx.beginPath()
						ctx.arc(60 * xs, 60 * xs, 30 * xs, 0, 2 * Math.PI);
						ctx.clip();
						ctx.drawImage(res[1].path, 30 * xs, 30 * xs, 60 * xs, 60 * xs);
						ctx.restore()
						//绘制内部背景框
						that.roundRect(ctx, 30 * xs, 106 * xs, 470 * xs, 680 * xs, 16 * xs, '#fff');

						//画商品图
						ctx.save();
						that.roundRect(ctx, 30 * xs, 106 * xs, 470 * xs, 680 * xs, 16 * xs);
						ctx.drawImage(res[0].path, 30 * xs, 106 * xs, 470 * xs, 470 * xs);
						ctx.restore()

						//画二维码
						ctx.save()
						ctx.beginPath()
						ctx.arc(110 * xs, 706 * xs, 50 * xs, 0, 2 * Math.PI);
						ctx.clip();
						ctx.drawImage(res[2].path, 60 * xs, 656 * xs, 100 * xs, 100 * xs);
						ctx.restore()

						//画微信昵称
						that.drawText(ctx, userinfor.nickname, 24 * xs, '#353535', 110 * xs, 60 * xs, 'true', 'left');

						that.drawText(ctx, '为你挑选了一个好物', 18 * xs, '#888888', 110 * xs, 86 * xs, '', 'left');

						that.textwrap(ctx, that.canvasgoodname, 30 * xs, '#353535', 50 * xs, 616 * xs, 530 * xs, 30 * xs, '', 2,
							'left');

						that.drawText(ctx, '长按二维码识别小程序', 26 * xs, '#353535', 184 * xs, 690 * xs, '', 'left');

						that.drawText(ctx, '分享自琅琊严选', 22 * xs, '#888888', 184 * xs, 728 * xs, '', 'left');

						ctx.draw(false, function() {
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 530,
								height: 816,
								destWidth: 2150,
								destHeight: 3200,
								fileType: 'jpg',
								quality: 1,
								canvasId: 'mycanvas',
								success: function(res) {
									// console.log("相册临时路径"+JSON.stringify(res))
									that.setData({
										postUrl: res.tempFilePath
									})
									wx.hideLoading();
								},
								fail: function(res) {
									console.log(res)
								}
							})

						});
					})
				}
			},

			//画圆角矩形
			roundRect(ctx, x, y, w, h, r, c = null) {
				if (w < 2 * r) {
					r = w / 2;
				}

				if (h < 2 * r) {
					r = h / 2;
				}

				ctx.beginPath();

				if (c != null) {
					ctx.fillStyle = c;
				}

				ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
				ctx.moveTo(x + r, y);
				ctx.lineTo(x + w - r, y);
				ctx.lineTo(x + w, y + r);
				ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
				ctx.lineTo(x + w, y + h - r);
				ctx.lineTo(x + w - r, y + h);
				ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
				ctx.lineTo(x + r, y + h);
				ctx.lineTo(x, y + h - r);
				ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
				ctx.lineTo(x, y + r);
				ctx.lineTo(x + r, y);

				if (c != null) {
					ctx.fill();
				} else {
					ctx.clip();
				}

				ctx.closePath();
			},

			//画文字
			drawText(ctx, text, font, c, x, y, bold, align) {
				ctx.setFillStyle(c);
				ctx.setFontSize(font);
				ctx.setStrokeStyle(c);
				ctx.setTextAlign(align);

				if (bold) {
					ctx.fillText(text, x, y - 0.5);
					ctx.fillText(text, x - 0.5, y);
				}

				ctx.fillText(text, x, y);
			},

			//文本换行
			textwrap(ctx, text, font, c, x, y, w, h, bold, line, align) {
				let td = Math.ceil(w / font);
				let tr = Math.ceil(text.length / td);

				for (let i = 0; i < tr; i++) {
					var txt = {
						ctx: ctx,
						x: x,
						y: y + i * h,
						c: c,
						font: font,
						align: align,
						text: text.substring(i * td, (i + 1) * td),
						bold: bold
					};

					if (i < line) {
						if (i == line - 1) {
							txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
						}

						this.drawText(txt.ctx, txt.text, txt.font, txt.c, txt.x, txt.y, txt.bold, txt.align);
					}
				}
			},

			// setTimeout(function() {
			//   wx.canvasToTempFilePath({
			//     x: 0,
			//     y: 0,
			//     width: 530,
			//     height: 816,
			//     destWidth: 530,
			//     destHeight: 816,
			//     canvasId: 'mycanvas',
			//     success: function(res) {
			//       that.setData({
			//         postUrl: res.tempFilePath,
			//       })
			//       that.saveImageToAlbum();
			//       wx.hideLoading()
			//       console.log(this.postUrl)
			//     },
			//     fail: function(res) {
			//       console.log(res)
			//     }
			//   })
			// }, 500)
			saveImageToAlbum: function() {
				var that = this; //获取用户授权 
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						//#endif
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',

								success(res) {
									uni.saveImageToPhotosAlbum({
										filePath: that.postUrl,

										success(res) {
											uni.hideLoading();
											uni.showModal({
												title: '提示',
												content: '图片已保存，快去分享吧',
												showCancel: false
											});
											console.log(JSON.stringify(res));
										}

									});
								},

								fail() {
									//重新获取授权
									uni.showModal({
										title: '提示',
										content: '需要您授权才能保存相册哦',
										cancelText: '取消',
										cancelColor: '#999',
										confirmText: '确定',
										confirmColor: '#f94218',

										success(res) {
											if (res.confirm) {
												uni.authorize({
													scope: 'scope.writePhotosAlbum',
													success(res) {
														uni.hideLoading();
														uni.showModal({
															title: '提示',
															content: '图片已保存，快去分享吧',
															showCancel: false
														});
														// console.log(JSON.stringify(res));
													}
												})
											} else if (res.cancel) {
												uni.showModal({
													title: '提示',
													content: '不授权无法保存到相册',
													cancelshow: false
												})
											}
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: that.postUrl,

								success(res) {
									uni.hideLoading();
									uni.showModal({
										title: '提示',
										content: '图片已保存，快去分享吧',
										showCancel: false
									});
									console.log(JSON.stringify(res));
								}

							});
						}
						//#ifdef MP-WEIXIN
					}
				});
				//#endif
			},

			canceldownload() {
				this.setData({
					showcanvas: false
				});
			},
			onLigonSuccess: function() {
				console.log("==onLigonSuccess==");
				this.getGoodsInfo();
				this.getcomment();
				this.getCartGoodsCount();;
			} 
		},
		filters:{
			formatRichText(commentcontent){
				//图片宽度全部为100%
				 let  comment =  commentcontent.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
				 return comment;
				 //图片宽度原尺寸缩小xs,但图片前后的空格无法控制
				// let content = comment.replace(/<img[^>]*>/ig, function(match, capture) {
				// 	//匹配图片中的width、height 进行处理替换
				// 	match = match.replace(/(width="(.*?)")|(height="(.*?)")/ig, 
				// 		function(getFirst, getSecond) {
				// 			//getFirst 取出图片的width \ height 
				// 			let numArr = getFirst.split('=');								
				// 			let num = numArr[0] + '=' +'"' +Number(JSON.parse(numArr[1]))*xs +"px" +'"';							
				// 			return num							
				// 		});		
				// 	return match;
				// })
				// console.log("content"+content);
				// return content;
			}	
		}
	};
</script>
<style>
	.container {
		margin-bottom: 100rpx;
		background: #f1f1f1;
	}

	button::after {
		border: none;
	}

	.goodsimgs {
		width: 100%;
		height: 990rpx;
	}

	.goodsimgs image {
		width: 100%;
		height: 100%;
	}

	.detailmenu {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		background: #fff;
		line-height: 100rpx;
	}

	.detailtop {
		margin-top: 0;
		width: 790rpx;
		position: fixed;
		z-index: 899;
		top: 146rpx;
	}

	.detailmenu .detailitem {
		line-height: 100rpx;
	}

	.detailmenu .detailitem .detailtext {
		font-size: 26rpx;
		color: #353535;
		line-height: 86rpx;
	}

	.detailmenu .detailitem .line {
		height: 4rpx;
		width: 30rpx;
		background: #b28850;
		border-top-left-radius: 6rpx;
		border-top-right-radius: 6rpx;
		margin: 0rpx auto 10rpx auto;
	}

	.detailmenu .detailitem .detailtextactive {
		font-size: 30rpx;
		color: #b28850;
		line-height: 76rpx;
	}

	.goods-info {
		width: 750rpx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.goods-info .l {
		display: block;
		width: 718.75rpx;
		height: 100%;
		margin-left: 31.25rpx;
		padding: 38rpx 31.25rpx 38rpx 0;
		flex: 1;
	}

	.goods-info .r {
		display: flex;
		width: auto;
		height: 100%;
		margin-right: 15rpx;
	}

	.goods-info .r .item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 15rpx;
	}

	.goods-info .icon {
		display: block;
		width: 33rpx;
		height: 29rpx;
	}

	.goods-info .r .txt {
		margin-top: 12rpx;
		font-size: 26rpx;
		color: #888888;
	}

	.goods-info .l text {
		display: block;
		width: 100%;
		text-align: left;
		color: #333333;
	}

	.goods-info .name {
		height: auto;
		/* margin-bottom: 5.208rpx; */
		font-size: 36rpx;
		overflow: hidden;
		/* line-height: 41rpx; */
	}

	.goods-info .desc {
		height: 43rpx;
		margin-bottom: 41rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #999;
	}

	.goods-info .price {
		height: 35rpx;
		font-size: 35rpx;
		line-height: 35rpx;
		color: #b4282d;
	}

	.goods-info .brand {
		margin-top: 23rpx;
		min-height: 40rpx;
		text-align: center;
	}

	.goods-info .brand text {
		display: inline-block;
		width: auto;
		padding: 2px 30rpx 2px 10.5rpx;
		line-height: 35.5rpx;
		border: 1px solid #f48f18;
		font-size: 25rpx;
		color: #f48f18;
		border-radius: 4px;
		background: url("http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png") 95% center no-repeat;
		background-size: 10.75rpx 18.75rpx;
	}

	.goods-attr {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0 31.25rpx 25rpx 31.25rpx;
		background: #fff;
	}

	.goods-attr .t {
		width: 687.5rpx;
		height: 104rpx;
		line-height: 104rpx;
		font-size: 38.5rpx;
	}

	.goods-attr .item {
		width: 687.5rpx;
		height: 68rpx;
		padding: 11rpx 20rpx;
		margin-bottom: 11rpx;
		background: #f7f7f7;
		font-size: 38.5rpx;
	}

	.goods-attr .left {
		float: left;
		font-size: 25rpx;
		width: 134rpx;
		height: 45rpx;
		line-height: 45rpx;
		overflow: hidden;
		color: #999;
	}

	.goods-attr .right {
		float: left;
		font-size: 36.5rpx;
		margin-left: 20rpx;
		width: 480rpx;
		height: 45rpx;
		line-height: 45rpx;
		overflow: hidden;
		color: #333;
	}

	.detail {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.detail image {
		width: 750rpx;
		display: block;
	}

	.detail .detail-item {
		border-radius: 12rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.detail .detail-item .item-title {
		font-size: 30rpx;
		color: #353535;
		padding: 36rpx 30rpx 16rpx 30rpx;
	}

	.detail .detail-item .item-desc {
		font-size: 24rpx;
		color: #888888;
		margin: 0 30rpx 36rpx 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.detail .detail-item .item-pic {
		height: 360rpx;
		width: 690rpx;
	}
/deep/ .jsx-428399900{
	margin:36rpx auto 0 auto;
	width:100%;
	line-height: 50rpx;
	font-size:24rpx;
	text-indent: 2em;
	color:#88888;
	background-color:#fff;
}
	.related-goods {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.related-goods .h {
		position: relative;
		height: 145.5rpx;
		width: 750rpx;
		padding: 56.25rpx 0;
		background: #fff;
		text-align: center;
		border-bottom: 1px solid #f4f4f4;
	}

	.related-goods .h .line {
		display: inline-block;
		position: absolute;
		top: 72rpx;
		left: 0;
		z-index: 2;
		height: 1px;
		margin-left: 225rpx;
		width: 300rpx;
		background: #ccc;
	}

	.related-goods .h .title {
		display: inline-block;
		position: absolute;
		top: 56.125rpx;
		left: 0;
		z-index: 3;
		height: 33rpx;
		margin-left: 285rpx;
		width: 180rpx;
		background: #fff;
	}

	.related-goods .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.related-goods .b .item {
		float: left;
		background: #fff;
		width: 375rpx;
		height: auto;
		overflow: hidden;
		text-align: center;
		padding: 15rpx 31.25rpx;
		border-right: 1px solid #f4f4f4;
		border-bottom: 1px solid #f4f4f4;
	}

	.related-goods .item .img {
		width: 311.45rpx;
		height: 311.45rpx;
	}

	.related-goods .item .name {
		display: block;
		width: 311.45rpx;
		height: 35rpx;
		margin: 11.5rpx 0 15rpx 0;
		text-align: center;
		overflow: hidden;
		font-size: 30rpx;
		color: #333;
	}

	.related-goods .item .price {
		display: block;
		width: 311.45rpx;
		height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #b4282d;
	}

	.bottom-btn2 {
		position: fixed;
		/* left: 0; */
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
		align-items: center;
		box-shadow: 0rpx 10rpx 50rpx 10rpx rgba(85, 85, 85, 0.10);
	}

	.bottom-btn2 .to {
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		width: 50%;
		text-align: center;
		color: #fff;
		/* border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4; */
		background: #353535;
		font-size: 30rpx;

	}
    .bottom-btn2 .con{
		height: 100rpx;
		line-height: 96rpx;
		width: 100%;
		text-align: center;
		color: #fff;
		background: #b28850;
		font-size: 30rpx;
	}
	.bottom-btn2 .now {
		/* border: 1px solid #b4282d; */
		background: #b28850;
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		width: 50%;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.bottom-btn {
		position: fixed;
		/* left: 0; */
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
		align-items: center;
		box-shadow: 0rpx 10rpx 50rpx 10rpx rgba(85, 85, 85, 0.10);
	}
	.bottom-btn .l {
		/* float: left; */
		height: 100rpx;
		/* width: auto; */
		/* border: 1px solid #f4f4f4; */
		display: flex;
		align-items: center;
		/* justify-content: center; */
		margin-left: 30rpx;
		margin-right: 15rpx;
	}
	.bottom-btn .l .action {
		/* position: relative;
		height: 60rpx;
		width: 60rpx;
		margin-left: 30rpx;
		margin-right: 15rpx; */
		flex: 1;
	}
	.bottom-btn .l .kefu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0;
		background: #fff;
	}

	.bottom-btn .txt {
		display: block;
		font-size: 20rpx;
		text-align: center;
		margin: 10rpx auto;
		line-height: 1;
		color: #333;
	}

	.bottom-btn .l .l-collect {
		border-right: none;
		border-left: none;
		text-align: center;
	}

	.bottom-btn .l .action .box {
		position: relative;
		height: 45rpx;
		width: 50rpx;
		margin-left: 10rpx;
		margin-top: -8rpx;
	}

	.bottom-btn .l .action .cart-count {
		height: 28rpx;
		width: 28rpx;
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		background: #b4282d;
		text-align: center;
		font-size: 18rpx;
		color: #fff;
		line-height: 28rpx;
		border-radius: 50%;
	}

	.bottom-btn .l .action .icon {
		position: absolute;
		top: 10rpx;
		left: 0;
	}

	.bottom-btn .l .icon {
		display: block;
		height: 30rpx;
		width: 30rpx;
		margin: 0 auto;
	}

	.bottom-btn .c {
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		flex: 1;
		text-align: center;
		color: #fff;
		/* border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4; */
		background: #353535;
		font-size: 30rpx;
		margin-left: 35rpx;
	}

	.bottom-btn .r {
		/* border: 1px solid #b4282d; */
		background: #b28850;
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		flex: 1;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
	}
	.bottom-btn .o{
		background: gray;
		height: 100rpx;
		width: 750rpx;
		line-height: 96rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}
	.bottom-btn2 {
		position: fixed;
		/* left: 0; */
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		background: #fff;
		align-items: center;
		box-shadow: 0rpx 10rpx 50rpx 10rpx rgba(85, 85, 85, 0.10);
	}

	.bottom-btn2 .to {
		height: 100rpx;
		line-height: 96rpx;
		width: 50%;
		text-align: center;
		color: #fff;
		background: #353535;
		font-size: 30rpx;
	}

	.bottom-btn2 .now {
		/* border: 1px solid #b4282d; */
		background: #b28850;
		float: left;
		height: 100rpx;
		line-height: 96rpx;
		width: 50%;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
	}
	.share-bar-wrap{
		height:100%;
		width: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		z-index: 11;
		bottom: 0;
	}
	.share-bar {
		height: 100%;
		width: 100%;
		height: auto;
		position: fixed;
		background: #f1f1f1 ;
		/* z-index: 11; */
		bottom: 0;
		/* display: none; */
		display: flex;
		flex-direction: column;
		border-radius: 15rpx 15rpx 0 0;
	}

	.share-bar .bars {
		width: 100%;
		height: auto;
		display: flex;
		padding: 40rpx 20rpx 0 0;
		background-color: #fff;
	}

	.share-bar .bars .item {
		width: auto;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		align-items: center;
		padding: 0;
		background-color: #fff;
		border: none;
	}

	.share-bar .bars .item .icon {
		width: 80rpx;
		height: 80rpx;
	}

	.share-bar .bars .item .txt {
		width: 130rpx;
		height: auto;
		font-size: 26rpx;
		color: #353535;
	}

	.share-bar .bottom {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.share-bar .bottom .txt {
		font-size: 30rpx;
		color: #333333;
	}



	.attr-pop-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, .5);
		z-index: 8;
		bottom: 0;
		/* display: none; */
	}

	.attr-pop {
		width: 100%;
		height: auto;
		max-height: 780rpx;
		padding: 30rpx 0 30rpx 30rpx;
		background: #fff;
		position: fixed;
		z-index: 9;
		bottom: 100rpx;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		overflow: hidden;
	}

	.attr-pop .close {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		right: 31.25rpx;
		overflow: hidden;
		top: 40rpx;
	}

	.attr-pop .close .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.attr-pop .img-info {
		width: 687.5rpx;
		height: auto;
		overflow: hidden;
		margin-bottom: 41.5rpx;
	}

	.attr-pop .img {
		float: left;
		height: 177rpx;
		width: 177rpx;
		background: #f4f4f4;
		margin-right: 31.25rpx;
		border-radius: 12rpx;
	}

	.attr-pop .info {
		float: left;
		height: auto;
		display: flex;
		align-items: center;
	}

	.attr-pop .n {
		font-size: 28rpx;
		color: #353535;
		height: auto;
		line-height: 33rpx;
		margin-bottom: 10rpx;
		width: 430rpx;
		overflow: hidden;
	}

	.attr-pop .p {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #d73d2e;
		height: auto;
		/* line-height: 33rpx; */
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}

	.attr-pop .p1 {
		font-size: 24rpx;
	}

	.attr-pop .p2 {
		font-size: 36rpx;
	}

	.attr-pop .c {
		overflow: hidden;
	}

	.attr-pop .a {
		font-size: 29rpx;
		color: #333;
		height: 40rpx;
		line-height: 40rpx;
	}

	.spec-con {
		width: 100%;
		height: auto;
		overflow: hidden;

	}

	.spec-con .spec-item {
		margin-top: 24rpx;
	}

	.spec-con .name {
		margin-bottom: 22rpx;
		font-size: 30rpx;
		color: #353535;
		width: 150rpx;
	}

	.spec-con .values {
		height: auto;
		margin-bottom: 30rpx;
		font-size: 0;
	}

	.spec-con .value {
		display: inline-block;
		height: 62rpx;
		padding: 0 20rpx;
		line-height: 60rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
		/* border: 1px solid #353535; */
		font-size: 26rpx;
		color: #353535;
		background-color: #eaeaea;
		border-radius: 4rpx;
	}

	.spec-con .value.disable {
		border: 1px solid #ccc;
		color: #ccc;
	}

	.spec-con .value.selected {
		/* border: 1px solid #eaeaea; */
		color: #ffffff;
		background-color: #b28850;
		border-radius: 4rpx;
	}

	.spec-con .number-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;
		padding-right: 30rpx;
	}

	.number-item .selnum {
		width: auto;
		height: 71rpx;
		border: 1px solid #e5e4e5;
		display: flex;
	}

	.number-item .name {
		font-size: 30rpx;
		color: #353535;
		margin-bottom: 0rpx;
	}

	.number-item .cut {
		width: 60rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
		color: #888888;
		background-color: #ffffff;
	}

	.number-item .cut.noChange {
		width: 60rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
		color: #888888;
		background-color: #f1f1f1;
	}

	.number-item .number {
		flex: 1;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
		border-left: 1px solid #e5e4e5;
		border-right: 1px solid #e5e4e5;
		width: 80rpx;
		font-size: 26rpx;
	}

	.number-item .add {
		width: 60rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
		color: #888888;
		background-color: #ffffff;
	}

	.divLine {
		background: #e5e4e5;
		width: 100%;
		height: 2rpx;
		margin-right: -30rpx;
	}

	.canvaswrap {
		height: 100%;
		width: 100%;
		position: fixed;
		background: rgba(0, 0, 0, .5);
		z-index: 11;
		top: 0;
		left: 0;
	}

	.showcanvas {
		display: block;
	}

	.hidecavas {
		display: none;
	}

	.canvaswrap .savepic {
		position: fixed;
		top: 1006rpx;
		left: 225rpx;
		height: 80rpx;
		width: 300rpx;
		line-height: 80rpx;
		border: solid 2rpx #e5e4e5;
		border-radius: 40rpx;
		color: #e5e4e5;
		font-size: 30rpx;
		text-align: center;
	}
</style>
